<template>
  <section class='f-detail-order'>
    <div class="f-flex-between" style="padding: 10px 15px">
      <p style="color:#666666">
        <span>订单编号：</span>
        <span>{{orderId || '--'}}</span>
      </p>
      <van-button type="primary" round plain size="mini" @click="handleCopy(orderId)">
        <span style="padding: 0 10px">复制订单号</span>
      </van-button>
    </div>

    <ul class="f-steps-group">
      <li class="f-step" v-for="(item,index) in stepList" :key="index">
        <div class="f-icon">
          <van-icon name="circle" color="#3178F4" v-if="index == 0" style="background:#3178F4;border-radius:50%" />
          <van-icon name="success" color="#a9a9a9" v-else />
          <p v-if="[1,4,5,6,7].includes(item.state)" :class="{'f-line': index + 1 < stepList.length}" style="height: 30px;"></p>
          <p v-else :class="{'f-line': index + 1 < stepList.length}" style="height: 45px;"></p>
        </div>
        <section style="flex:1">
          <div class="f-flex-between">
            <p style="font-size:14px" :style="{'color': statusColor[item.state]}">
              {{statusForm[item.state]}}
            </p>
            <p>{{ getDateTime(item.createdTime)[6] }}</p>
          </div>
          <div class="f-flex-between f-mt-05" style="color:#2C71F0;" v-if="item.chargesOrderId"
            @click="toEarning(item.chargesOrderId)">
            <p>佣金订单：{{item.chargesOrderId}}</p>
            <p class="f-flex-between" style="width:95px">
              <span>佣金：{{item.amount / 100}}元</span>
              <van-icon name="arrow" />
            </p>
          </div>
          <div class="f-mt-05" v-if="item.state == 2">失败原因：{{item.content || '--'}}</div>
          <div class="f-mt-05 f-flex-between" v-if="item.relationId" style="color:#2C71F0;"
            @click="toAuditDetail(item.relationId)">
            <p>关联订单：{{item.relationId || '--'}}</p>
            <van-icon name="arrow" />
          </div>
        </section>
      </li>
    </ul>

    <van-cell class="f-mt-15" title="供应商" :value="formData.shopName" />
    <van-cell title="供应商商品" :value="formData.goodsName" />

    <van-cell class="f-mt-15" title="激活号码" :value="formData.phone" />
    <van-cell title="机主姓名" :value="formData.idcardName" />

    <van-cell class="f-mt-15" v-if="formData.extraTxt1Name" :title="formData.extraTxt1Name" :value="formData.withExtraTxt1" />
    <van-cell v-if="formData.extraTxt2Name" :title="formData.extraTxt2Name" :value="formData.withExtraTxt2" />
    <van-cell v-if="formData.extraTxt3Name" :title="formData.extraTxt3Name" :value="formData.withExtraTxt3" />

    <p class="f-mt-15 f-title">上传开卡照片</p>
    <van-cell-group class="f-flex-row" style="flex-wrap:wrap">
      <van-field v-if="formData.withImg1" name="withImg1" style="width:50%;padding:10px" @click="imagePreview(formData.withImg1)">
        <template #input>
          <section>
            <img class="f-img1" :src="formData.withImg1" alt="">
            <p class="f-center" style="font-size: 12px;color: #424242;">身份证人像面</p>
          </section>
        </template>
      </van-field>
      <van-field v-if="formData.withImg2" name="withImg2" style="width:50%;padding:10px" @click="imagePreview(formData.withImg2)">
        <template #input>
          <section>
            <img class="f-img1" :src="formData.withImg2" alt="">
            <p class="f-center" style="font-size: 12px;color: #424242;">身份证国徽面</p>
          </section>
        </template>
      </van-field>
      <van-field v-if="formData.withImg3" name="withImg3" style="width:50%;padding:10px" @click="imagePreview(formData.withImg3)">
        <template #input>
          <section>
            <img class="f-img1" :src="formData.withImg3" alt="">
            <p class="f-center" style="font-size: 12px;color: #424242;">手持身份证照</p>
          </section>
        </template>
      </van-field>
      <van-field v-if="formData.withImg4" name="withImg4" style="width:50%;padding:10px" @click="imagePreview(formData.withImg4)">
        <template #input>
          <section>
            <img class="f-img1" :src="formData.withImg4" alt="">
            <p class="f-center" style="font-size: 12px;color: #424242;">手持反诈说明</p>
          </section>
        </template>
      </van-field>
      <van-field v-if="formData.withExtraImg1" name="withExtraImg1" style="width:50%;padding:10px"
        @click="imagePreview(formData.withExtraImg1)">
        <template #input>
          <section>
            <img class="f-img1" :src="formData.withExtraImg1" alt="">
            <p class="f-center" style="font-size: 12px;color: #424242;">{{formData.extraImg1Name}}</p>
          </section>
        </template>
      </van-field>
      <van-field v-if="formData.withExtraImg2" name="withExtraImg2" style="width:50%;padding:10px"
        @click="imagePreview(formData.withExtraImg2)">
        <template #input>
          <section>
            <img class="f-img1" :src="formData.withExtraImg2" alt="">
            <p class="f-center" style="font-size: 12px;color: #424242;">{{formData.extraImg2Name}}</p>
          </section>
        </template>
      </van-field>
      <van-field v-if="formData.withExtraImg3" name="withExtraImg3" style="width:50%;padding:10px"
        @click="imagePreview(formData.withExtraImg3)">
        <template #input>
          <section>
            <img class="f-img1" :src="formData.withExtraImg3" alt="">
            <p class="f-center" style="font-size: 12px;color: #424242;">{{formData.extraImg3Name}}</p>
          </section>
        </template>
      </van-field>
    </van-cell-group>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { getDateTime, successDeal } from '@/utils/utils';
import { showImagePreview } from 'vant';
import api from '../api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      orderId: '',
      formData: {},

      stepList: [],
      statusForm: {
        '1': '待审核',
        '2': '审核失败',
        '3': '审核成功',
        '4': '待上级审核',
        '5': '上级审核成功（待分佣）',
        '6': '资料上传成功',
        '7': '已转发',
        '8': '分佣成功',
        '9': '佣金核减',
      },
      statusColor: {
        '1': '#FF8030',
        '2': '#FF2333',
        '3': '#4BBC1F',
        '4': '#FF8030',
        '5': '#FF8030',
        '6': '#000000',
        '7': '#000000',
        '8': '#4BBC1F',
        '9': '#FF2A2A',
      }

    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '订单详情',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightText: '',
      });

      state.orderId = route.query.orderId
      getOrderDetail(state.orderId)
      getOrderRecord(state.orderId)
    })

    const getOrderDetail = (orderId) => {
      let json = {
        orderId
      }
      api.orderDetail(json).then(res => {
        state.formData = res.data
      })
    }

    const getOrderRecord = (orderId) => {
      let json = {
        orderId
      }
      api.orderRecord(json).then(res => {
        console.log(res)
        state.stepList = res.data
      })
    }

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    const imagePreview = (src) => {
      showImagePreview([src]);
    }

    const toAuditDetail = (orderId) => {
      router.push({
        path: '/index/auditDetail',
        query: {
          orderId: orderId,
        }
      })
      return
      if (route.query.pathName) {
        router.replace({
          path: '/middle',
          query: {
            orderId: orderId,
            pathName: '/index/auditDetail'
          }
        })
      } else {
        router.push({
          path: '/middle',
          query: {
            orderId: orderId,
            pathName: '/index/auditDetail'
          }
        })
      }
    }

    const toEarning = (orderId) => {
      router.push({
        path: '/capital/earning/detail',
        query: {
          incomeOrderId: orderId,
        }
      })
      return
      if (route.query.pathName) {
        router.replace({
          path: '/middle',
          query: {
            incomeOrderId: orderId,
            pathName: '/capital/earning/detail'
          }
        })
      } else {
        router.push({
          path: '/middle',
          query: {
            incomeOrderId: orderId,
            pathName: '/capital/earning/detail'
          }
        })
      }
    }

    return {
      ...toRefs(state),
      handleCopy,
      imagePreview,
      getDateTime,
      toAuditDetail,
      toEarning
    }
  }
}
</script>
<style lang='scss' scoped>
.f-detail-order {
  .f-steps-group {
    background: #fff;
    padding: 10px;
    color: #373737;
    .f-step {
      display: flex;
      margin-bottom: 20px;
      .f-icon {
        margin-top: 3px;
        width: 20px;
        position: relative;
        .f-line {
          position: absolute;
          background: #a9a9a9;
          width: 1px;
          margin-left: 5px;
        }
      }
    }
    .f-step:last-child {
      margin-top: 25px;
    }
  }
  .f-img1 {
    width: 167px;
    height: 104px;
  }
  .f-title {
    padding: 15px;
    font-size: 14px;
    color: #424242;
    background: #fff;
  }
}
</style>